<!-- 滑块组件使用示例 -->
<template>
  <div class="slider-demo">
    <h2>基础图片展示</h2>
    <image-slider
      :tabs="imageTabs"
      :section-index.sync="currentSectionIndex"
      :item-index.sync="currentItemIndex"
      @slide-change="onSlideChange"
    >
      <template #image="{ item, index, isActive }">
        <img :src="item" :alt="'图片 ' + (index + 1)" class="slide-image">
      </template>
    </image-slider>

    <h2>多媒体混合展示</h2>
    <image-slider
      :tabs="mixedTabs"
      :section-index.sync="mixedSectionIndex"
      :item-index.sync="mixedItemIndex"
      @slide-change="onSlideChange"
      @section-change="onSectionChange"
    >
      <!-- 图片类型内容 -->
      <template #image="{ item, index, isActive }">
        <div class="video-container" style="display: flex;justify-content: center;align-items: center">
          <img :src="item.url" :alt="item.alt" class="slide-image">
        </div>

      </template>

      <!-- 视频类型内容 -->
      <template #video="{ item, index, isActive, sectionIndex }">
        <video
          :src="item.url"
          :controls="true"
          class="slide-video"
          @loadedmetadata="onVideoLoaded"
          :poster="item.poster"
          muted
          :autoplay="true"
          :ref="'video-' + mixedSectionIndex + '-' + index"
        ></video>
      </template>

      <!-- 3D模型类型内容 -->
      <template #model3d="{ item, index, isActive }">
        <img :src="item.url" :alt="item.alt" class="slide-image">
      </template>
    </image-slider>

    <h2>自定义内容展示</h2>
    <image-slider
      :tabs="customTabs"
      :section-index.sync="customSectionIndex"
      :item-index.sync="customItemIndex"
      @slide-change="onSlideChange"
    >
      <!-- 自定义卡片内容 -->
      <template #card="{ item, index, isActive }">
        <div class="custom-card" :class="{ active: isActive }">
          <div class="card-image">
            <img :src="item.image" :alt="item.title">
          </div>
          <div class="card-content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </template>
    </image-slider>
  </div>
</template>

<script>
import ImageSlider from '@/components/ImageSlider.vue'

export default {
  name: 'SliderDemo',
  components: {
    ImageSlider
  },
  data() {
    return {
      // 基础图片展示配置
      imageTabs: [
        {
          name: '产品图片',
          type: 'image',
          items: [
            'https://picsum.photos/400/300?random=1',
            'https://picsum.photos/400/300?random=2',
            'https://picsum.photos/400/300?random=3'
          ],
          showCounter: true
        }
      ],
      currentSectionIndex: 0,
      currentItemIndex: 0,
      // 多媒体混合展示配置
      mixedTabs: [
        {
          name: '产品图片',
          type: 'image',
          items: [
            { url: 'https://picsum.photos/400/300?random=4', alt: '产品图片1' },
            { url: 'https://picsum.photos/400/300?random=5', alt: '产品图片2' }
          ],
          showCounter: true
        },
        {
          name: '产品视频',
          type: 'video',
          items: [
            { url: 'https://upos-sz-mirrorhw.bilivideo.com/upgcxcode/05/91/29355869105/29355869105-1-192.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1744422075&gen=playurlv2&os=bcache&oi=730762249&trid=00009ff189244e184e3b9d175dad2f9f68b6O&mid=0&platform=html5&og=hw&upsig=6a70977b14926f8820a222eea97c3263&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform,og&cdnid=88008&bvc=vod&nettype=1&orderid=0,3&buvid=&build=7330300&f=O_0_0&bw=48869&logo=80000000' },
            // { url: 'https://cn-gdfs-ct-01-16.bilivideo.com/upgcxcode/44/77/29317467744/29317467744-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1744422161&gen=playurlv2&os=bcache&oi=1782024106&trid=0000f2724474ca214e4ab0666e1c94649d30h&mid=0&platform=html5&og=hw&upsig=abb17a8ebea32214e7f27a363fb91d31&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform,og&cdnid=60916&bvc=vod&nettype=0&f=h_0_0&bw=20843&logo=80000000' },
            { url: 'https://cn-gdfs-ct-01-16.bilivideo.com/upgcxcode/44/77/29317467744/29317467744-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1744422161&gen=playurlv2&os=bcache&oi=1782024106&trid=0000f2724474ca214e4ab0666e1c94649d30h&mid=0&platform=html5&og=hw&upsig=abb17a8ebea32214e7f27a363fb91d31&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform,og&cdnid=60916&bvc=vod&nettype=0&f=h_0_0&bw=20843&logo=80000000' }
          ],
          showCounter: true
        },
        {
          name: '3D展示',
          type: 'model3d',
          items: [
            // { url: 'https://example.com/model1.glb' },
            // { url: 'https://example.com/model2.glb' },
            { url: 'https://picsum.photos/400/300?random=4', alt: '产品图片1' },
            { url: 'https://picsum.photos/400/300?random=5', alt: '产品图片2' }
          ],
          showCounter: true
        }
      ],
      mixedSectionIndex: 1,
      mixedItemIndex: 0,
      // 自定义内容展示配置
      customTabs: [
        {
          name: '产品系列',
          type: 'card',
          items: [
            {
              image: 'https://picsum.photos/400/300?random=6',
              title: '产品系列1',
              description: '这是产品系列1的详细描述'
            },
            {
              image: 'https://picsum.photos/400/300?random=7',
              title: '产品系列2',
              description: '这是产品系列2的详细描述'
            }
          ],
          showCounter: true
        }
      ],
      customSectionIndex: 0,
      customItemIndex: 0
    }
  },
  methods: {
    // 内容切换事件处理
    onSlideChange({ sectionIndex, itemIndex, item }) {
      console.log('内容切换:', {
        组索引: sectionIndex,
        内容索引: itemIndex,
        内容: item
      });

      // 暂停所有视频
      const videos = document.querySelectorAll('.slide-video');
      videos.forEach(video => {
        console.log('暂停视频:', video.src);
        video.pause();
        video.muted = true; // 确保所有视频静音
      });
      console.log('sectionIndex:', sectionIndex);
      console.log('itemIndex:', itemIndex);
      console.log('this.$refs:', this.$refs);
      // 自动播放当前活动视频
      this.$nextTick(() => {
        const activeVideoRef = `video-${this.mixedSectionIndex}-${this.mixedItemIndex}`;
        const activeVideo = this.$refs[activeVideoRef];
        console.log('activeVideo:', activeVideo);
        if (activeVideo) {
          console.log('播放视频:', activeVideo.src);
          activeVideo.muted = false; // 取消静音
          activeVideo.play();
        }
      });
    },
    // 组切换事件处理
    onSectionChange({ sectionIndex, section }) {
      console.log('组切换:', {
        组索引: sectionIndex,
        组信息: section
      })
    },
    // 视频加载完成事件处理
    onVideoLoaded(event) {
      console.log('视频加载完成:', event.target.src)
    }
  }
}
</script>

<style scoped>
.slider-demo {
  padding: 20px;
}

h2 {
  margin: 30px 0 20px;
  color: #333;
}

/* 视频样式 */
.slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3D模型样式 */
.slide-model {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

/* 自定义卡片样式 */
.custom-card {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.custom-card.active {
  transform: scale(1.02);
}

.card-image {
  height: 60%;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-content h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.card-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}
</style>
